<template>
	<view class="margin-bottom goods-list-box" :class="show?'show':''">
		<view class="flex flex-wrap  " v-if="list_data.length != 0" style="margin-bottom: 100upx;">
			<view class="basis-df padding-sm padding-right-xs ">
				<block v-for="(item,index) in list_data" :key="index" v-if="index%2==0">
					<view class="bg-white margin-bottom-sm list-radius"  @tap="listTap(item)">
						<view class="goods-img">
							<image :src="imgUrl + item.add_file" mode="widthFix" lazy-load/>
						</view>
						<view class="padding-xs">
              <text :class="['tag-item readc', item.is_new !== 1 ?'old' : '']">{{item.is_new | filterold }}</text>
							<view class="text-cut-2 text-black">{{item.name}}</view>
							<view class="margin-top-xs">
								<view class="flex">
									<view class="flex-sub">
										<text class="text-price text-red text-xl text-left">{{item.day_price}}/天</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="basis-df padding-sm padding-left-xs">
				<block v-for="(item,index) in list_data" :key="index" v-if="index%2!=0">
					<view class="bg-white margin-bottom-sm list-radius"  @tap="listTap(item)">
						<view class="goods-img">
							<image :src="imgUrl + item.add_file" mode="widthFix" lazy-load/>
						</view>
						<view class="padding-xs">
              <text :class="['tag-item readc', item.is_new !== 1 ?'old' : '']">{{item.is_new | filterold }}</text>
							<view class="text-cut-2 text-black">{{item.name}}</view>
							<view class="margin-top-xs">
								<view class="flex">
									<view class="flex-sub">
										<text class="text-price text-red text-xl text-left">{{item.day_price}}/天</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
    <blue-empty v-else  />
	</view>
</template>

<script>
import { mapState } from 'vuex'
	export default {
		name: 'goods-list',
		props: {
			list_data: {
				type: Array,
				default: () => {
					return []
				}
			},
			show: {
				type: Boolean,
				default: true
			}
		},
    computed:{
      ...mapState(['imgUrl'])
    },
		methods: {
			listTap(data) {
				this.$emit('listTap', {
					data
				});
			}
		},
    /* 过滤器 */
    filters:{

      // 过滤是否全新
      filterold(value){
        if(value && value == 1){
          return '全新'
        }else{
          return '非全新'
        }
      }
    }
	}
</script>

<style lang="scss" scoped>
.tag-item {
  font-size: 24rpx;
  padding: 0 4rpx;
  background-color: #ffeeed;
  border-radius: 8rpx;
  margin-right: 10rpx;
  color: #ff584f;
  &.readc {
    background-color: #ff7d55;
    background-image: linear-gradient(to right, #ff7d55, #ff4b4d);
    color: #FFFFFF;

    &.old{
      background-image: linear-gradient(to right, #001AFF, #005AFF);
    }
  }
}
	.goods-list-box {
		position: relative;
		width: 100%;
		display: none;
		.list-radius {
			border-radius: 19rpx;
		}
		.goods-img {
			position: relative;
			width: 100%;
			image {
				width: 100%;
				border-radius: 19rpx 19rpx 0 0;
			}
			.pay-view {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				font-size: 46rpx;
			}
			.service-view {
				position: absolute;
				width: 100%;
				bottom: 7.5rpx;
				right: 10rpx;
			}
			.mold-view {
				position: absolute;
				width: 100%;
				bottom: 7.5rpx;
				left: 10rpx;
			}
		}
		.text-time {
			line-height: 47rpx;
		}
		.recommend-list-box {
			.img-aat {
				width: 55rpx;
				margin-top: 10rpx;
			}
			.img-goods {
				font-variant: small-caps;
				margin: 0;
				padding: 0;
				display: inline-flex;
				text-align: center;
				-webkit-box-pack: center;
				justify-content: center;
				-webkit-box-align: center;
				align-items: center;
				white-space: nowrap;
				position: relative;
				width: 137rpx;
				height: 137rpx;
				background-size: cover;
				background-position: center;
				vertical-align: middle;
				border-radius: 12%;
			}
		}
	}
	.goods-list-box.show {
		display: block;
	}
</style>
